<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>37_事件流-DOM2-高级浏览器-捕获事件流</title>
        <style>
            #laoda {
                position: relative;
                width: 500px;
                height: 500px;
                background-color: red;
            }

            #laoer {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);

                width: 300px;
                height: 300px;
                background-color: skyblue;
            }

            #laosan {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);

                width: 100px;
                height: 100px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id="laoda">
            <div id="laoer">
                <div id="laosan">

                </div>
            </div>
        </div>

        <script>
            var laoda = document.querySelector('#laoda');
            var laoer = document.querySelector('#laoer');
            var laosan = document.querySelector('#laosan');


            // addEventListener的第三个参数如果是true了 那么就代表的是捕获事件流
            laoda.addEventListener('click',function(){
                console.log('laoda');
            },true)

            laoer.addEventListener('click',function(){
                console.log('laoer');
            },true)

            laosan.addEventListener('click',function(){
                console.log('laosan');
            },true)

            document.body.addEventListener('click',function(){
                console.log('body');
            },true)

            document.documentElement.addEventListener('click',function(){
                console.log('html');
            },true)

            document.addEventListener('click',function(){
                console.log('document');
            },true)

            window.addEventListener('click',function(){
                console.log('window');
            },true)

        </script>

    </body>
</html>